<template>
    <div class="type">
        <div class="top" @click="toSearch">
            <uni-icons class="icon" type="search" size="20"></uni-icons>
            搜索商品,共195160款好物
        </div>
        <div class="center">
            <div class="left">
                <scroll-view class="scroll" scroll-y enable-flex scroll-with-animation :show-scrollbar="false">
                    <div
                        class="list"
                        @click="handler(index, item.id)"
                        v-for="(item, index) in categoryArr"
                        :key="index">
                        <div v-if="num == index" class="line"></div>
                        {{ item.name }}
                    </div>
                </scroll-view>
            </div>
            <div class="right">
                <scroll-view scroll-y enable-flex style="height: 1334rpx">
                    <div class="topimg">
                        <image
                            class="image"
                            :src="
                                banner
                                    ? banner
                                    : 'https://yanxuan.nosdn.127.net/static-union/1691549832be2cdb.jpg?quality=75&type=webp&imageView&thumbnail=0x196'
                            "
                            mode="scaleToFill" />
                    </div>
                    <div class="bottom" v-for="(item, index) in goodsArr" :key="index">
                        <div class="title">{{ item.name }}</div>
                        <div class="box">
                            <div class="item" v-for="(item1, index) in item.categoryList" :key="index">
                                <img :src="item1.wapBannerUrl" alt="" class="img" />
                                <div class="text">{{ item1.name }}</div>
                            </div>
                        </div>
                    </div>
                </scroll-view>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import Ajax from '@/api/type';

const num = ref<any>(0);
const categoryArr = ref<any>([]);
const categoryId = ref<any>(11);
const goodsArr = ref<any>([]);
const banner = ref<any>('');
const handler = (index: any, id: number) => {
    num.value = index;
    categoryId.value = id;
    getGoods();
};
onMounted(() => {
    getList();
    getGoods();
});
const getList = async () => {
    let result: any = await Ajax.reqList();
    console.log(result);
    categoryArr.value = result.data.categoryL1List;
    // console.log(categoryId.value);
};
const getGoods = async () => {
    // console.log(categoryId.value);

    let result: any = await Ajax.reqGoods(categoryId.value);
    // console.log(result);
    goodsArr.value = result.data.categoryGroupList;
    banner.value = result.data.currentCategory.bannerUrl;
};
const toSearch = () => {
    uni.navigateTo({
        url: '/pages/search/index',
    });
};
</script>

<style scoped lang="less">
.type {
    width: 100%;
    .top {
        width: 90%;
        height: 60rpx;
        color: #666;
        line-height: 60rpx;
        background-color: #ededed;
        border-radius: 10rpx;
        margin: 10rpx auto;
        .icon {
            vertical-align: -2rpx;
            margin-left: 100rpx;
        }
    }
    .center {
        display: flex;
        border-top: 1px solid #666;
        // margin: 0 20rpx;
        .left {
            border-right: 1px solid #666;
            margin: 0rpx 30rpx;
            .scroll {
                height: 1334rpx;
                .list {
                    display: flex;
                    flex-wrap: nowrap;
                    margin: 30rpx 0;
                    padding: 0 20rpx;
                    width: 130rpx;
                    color: #2b2b2b;
                    font-size: 28rpx;
                    .line {
                        width: 4rpx;
                        background: lightcoral;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                }
            }
        }
        .right {
            // margin: 0 30rpx;
            display: flex;
            padding: 0;
            // width: 100%;
            flex-direction: column;
            // justify-content: center;
            .topimg {
                width: 490rpx;
                height: 200rpx;
                margin: 20rpx auto;
                .image {
                    width: 490rpx;
                    height: 200rpx;
                    background: #dedede;
                }
            }
            .bottom {
                display: flex;
                flex-direction: column;
                margin: 20rpx 0;
                .title {
                    margin: 20rpx 10rpx;
                }
                .box {
                    display: flex;
                    flex-wrap: wrap;
                    border-top: 1px solid #666;
                    margin-left: 20rpx;
                    .item {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        font-size: 24rpx;
                        .img {
                            width: 150rpx;
                            height: 150rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
